<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vue-快速入门</title>
</head>
<body>

  <div id="app1">
    <!-- 插值表达式,用Vue语法，将数据替换掉插值表达式中的变量 -->
    <h1> {{message}}</h1>
    <h2> {{age}}</h2>
  </div>


  <script type="module">
    // 导入在线vue.js的createApp方法 
    import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js';
    // 创建vue实例，并接管id为app1的div元素
    createApp({
      data() {
        return {
          // 定义数据，将message渲染到h1标签中的{{message}}
          message:"Hello World!",
          // 定义数据，将age渲染到h2标签中的{{age}}
          age:18
        }
      },
    }).mount("#app1");  //  挂载，就是接管id为app1的div元素
  </script>
</body>
</html>